<template>
  <div class="comment-container">
    <van-nav-bar
    :title="comment.reply_count >0 ? `${comment.reply_count}条回复`:'暂无回复'"
  >
    <van-icon slot="left"
    name="cross"
    @click="$emit('close')"
    />
</van-nav-bar>
  <div class="scroll-wrap">
    <!-- 当前评论项 -->
    <CommentItem :comment="comment" />
    <!-- 评论的回复列表 -->
    <van-cell title="全部回复" />
        <CommentList
        :list="commentList"
        :source="comment.com_id"
        type="c"
  />
  </div>
  <!-- 发布评论 -->
  <div class="post-wrap">
    <van-button class="post-btn" size="small" @click="isPostShow=true"> 写评论 </van-button>
  </div>
  <van-popup v-model="isPostShow" position="bottom">
    <CommentPost :target="comment.com_id" @post-success="onPostSuccess"/>
  </van-popup>

  </div>

</template>

<script>
import CommentItem from './comment-item.vue'
import CommentList from './comment-list.vue'
import CommentPost from './comment-post.vue'
export default {
  name: 'CommentReply',
  components: { CommentItem, CommentList, CommentPost },
  props: {
    comment: {
      type: Object,
      require: true
    }
  },
  data () {
    return {
      isPostShow: false,
      commentList: [] // 评论回复列表
    }
  },

  mounted () {

  },

  methods: {
    onPostSuccess (data) {
      // 更新回复数量
      // eslint-disable-next-line no-unused-expressions,vue/no-mutating-props
      this.comment.reply_count++
      this.isPostShow = false
      // 追加到顶部
      this.commentList.unshift(data.new_obj)
    }
  }
}
</script>

<style lang="less" scoped>
.scroll-wrap {
  position: fixed;
  top: 46px;
  left: 0;
  right: 0;
  bottom: 44px;
  overflow: auto;
}
.post-wrap {
  height: 44px;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #fff;
  border-top: 1px solid #d8d8d8;
  .post-btn {
    width: 100%;

  }
}
</style>
